import React from 'react'
import { Row, Col, Icon, Menu, Dropdown } from 'antd'
import {connect} from 'react-redux';
import './index.less'
import { Link } from 'react-router'
import {doLogout} from '../../reducers/app/actions';

class Header extends React.Component {
    constructor() {
        super();
        this.state = {
            showUserPannel:false
        }
    }
    render() {
        const {user} = this.props
        return (
            <div className="header">
                <div className="topnav">
                    <h1><a href="#" className="logo">云</a></h1>

                    <div className="top-panel">
                        <ul className="top-menu pandect-menu">
                            <li className="hide">
                                <a href="">总览</a>
                            </li>
                            <li className="cur hide">
                                <a href="javascript:;" style={{cursor:"default"}}>
                                    云产品
                                    <i className="top-menu-arrows"/>
                                </a>

                            </li>
                        </ul>
                        <ul className="top-menu custom-menu nav-menu-list">
                            <li className="custom-item cur">
                                <a href="#">用户</a>
                            </li>
                            <li className="custom-item hide">
                                <a href="#">云服务器</a>
                            </li>
                        </ul>
                        <ul className="top-menu user-menu">

                            <li className="hide">
                                <a href="javascript:;">工单</a>
                                <div className="drop-down-layer service-support">
                                    <ul className="service-support-menu">
                                        <li>
                                            <a href="javascript:;" className="link">发起工单</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" className="link">发起工单</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li className={"link" + (this.state.showUserPannel ? " cur" : "")} onClick={()=>{this.setState({showUserPannel:true})}} style={{position:"relative"}}>
                                <a href="javascript:;">
                                <span className="user-name">
                                    Joseph
                                </span>
                                    <i className="top-menu-arrows"/>
                                </a>
                                <div className="drop-down-layer admin-center" style={{right:0}}>
                                    <div className="admin-center-list">
                                        <ul className="select-list clearfix">
                                            <li>
                                                <a href="javascript:;">账户信息</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;">账户信息</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div className="exit">
                                        <a href="javascript:;" onClick={()=>{this.props.doLogout()}} className="btn-exit">退出</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}

export default connect(
    state=>{
        const app = state.app;
        console.log(JSON.stringify(app))
        const common = state.app;
        return {
            app,
            common
        }
    },
    dispatch =>{
        return {
            doLogout: ()=>dispatch(doLogout())
        }
    }
)(Header);
